<template>
  <el-dialog
    :model-value="visible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    width="1200px"
    top="5vh"
  >
    <MainContainer class="p-5 h-[60vh]">
      <MyQuery
        v-model:params="params"
        :options="queryOptions"
        @query="handleQuery"
        @reset="handleReset"
      ></MyQuery>
      <MyTable
        v-loading="loading"
        class="my-2"
        :data="list"
        :columns="columns"
        :is-show-selection="true"
        @confirm="handleConfirm"
      ></MyTable>
      <el-pagination
        v-model:currentPage="params.page"
        v-model:page-size="params.limit"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        class="justify-end"
        @size-change="handleQuery"
        @current-change="handleQuery"
      />
    </MainContainer>
    <template #footer>
      <div class="flex">
        <el-button size="large" class="flex-1" @click="handleClose">
          取消
        </el-button>
        <el-button
          :loading="loading"
          size="large"
          type="primary"
          class="flex-1"
          @click="handleBindingCompany"
        >
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="jsx">
import useCRUD from "@/composables/useCRUD";
import MyQuery from "@/components/MyQuery.vue";
import MainContainer from "@/components/MainContainer.vue";
import MyTable from "@/components/MyTable.vue";
import parseTime from "@/utils/parseTime.js";
import { toRefs } from "vue";
import { fetchList, bindingWx } from "@/api/robot-company";
import { ElMessage, ElMessageBox } from "element-plus";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  wxId: {
    type: Number,
    default: 0,
  },
});

let companyIds;

const { visible, wxId } = toRefs(props);

const emit = defineEmits(["update:visible", "confirm"]);

function handleClose() {
  emit("update:visible", false);
  params.value = { page: 1, limit: 10 };
  handleQuery();
}

//选择单位
function handleConfirm(val) {
  if (val.length === 1) {
    companyIds = String(val[0].id);
  } else {
    companyIds = "";
    val.forEach((element) => {
      companyIds += String(element.id) + ",";
    });
    companyIds = companyIds.slice(0, companyIds.length - 1);
  }
}

function handleBindingCompany() {
  ElMessageBox.confirm("确认绑定单位吗", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      loading.value = true;
      bindingWx(wxId.value, companyIds);
      emit("update:visible", false);
      ElMessage({
        type: "success",
        message: "绑定成功",
      });
      handleQuery();
      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
      ElMessage({
        type: "info",
        message: "已取消",
      });
      emit("update:visible", true);
    });
  params.value = { page: 1, limit: 10 };
  handleQuery();
}

const queryOptions = [
  {
    prop: "name",
    placeholder: "机器人名称",
  },
];

const columns = [
  {
    prop: "name",
    label: "单位名称",
  },
  {
    prop: "address",
    label: "地址",
  },
  {
    prop: "tel",
    label: "联系电话",
  },
  {
    prop: "remark",
    label: "备注",
  },
  {
    prop: "createTime",
    label: "创建时间",
    formatter(row) {
      const date = new Date(row.createTime);
      return parseTime(date);
    },
  },
];

const crudOptions = {
  queryApi: fetchList,
};
const { params, handleQuery, list, loading, handleReset, total } =
  useCRUD(crudOptions);

handleQuery();
</script>
